import { Popconfirm, Input, Popover } from "antd";
import IconFont from "@/components/IconFont";

const columnConfig = {
	sort: {
		name: "序号",
		code: "serialNumber",
		width: 60,
		render: (text, record) => {
			if (record.templateAttribute == 1) {
				return (
					<>
						<span>{text}</span>
					</>
				);
			}
		}
	},
	taskTypeName: {
		name: "模板名称",
		code: "templateName",
		width: 150
	},
	name: {
		name: "模板属性",
		code: "fileName",
		width: 120,
		render: (text, record) => {
			if (record.templateAttribute == "1") {
				return "默认模板";
			} else {
				return "自定义模板";
			}
		}
	},
	state: {
		name: "标签类型",
		code: "labelTypeName",
		width: 100,
		render: text => {
			if (text) {
				return (
					<>
						<span>{text}</span>
					</>
				);
			}
		}
	},
	sizeWidth: {
		name: "模板尺寸（mm）",
		code: "sizeWidth",
		width: 100,
		render: (text, record) => {
			return <div>{record.sizeWidth + "*" + record.sizeHeight}</div>;
		}
	},
	createTime: {
		name: "应用模块",
		code: "applyModule",
		width: 250,
		render: text => {
			return <div>{text && text.split(",").map(item => <div>{item}</div>)}</div>;
		}
	},
	ecStoreList: {
		name: "适用店铺",
		code: "ecStoreList",
		width: 150
	},
	opera: {
		name: "操作",
		code: "roleNames",
		width: 150,
		lock: true
	}
};

//店铺渲染
const storeRender = record => {
	if ([8, 9, 10].includes(record.labelType)) {
		return "-";
	} else {
		if (record.ecStoreIds == "0") {
			return "全部";
		} else {
			return record.ecStoreList.map(item => item.storeName).join(",");
		}
	}
};

//渲染操作列
const RenderOpera = ({ handleOpera, record }) => {
	return (
		<span className="opera-span-common">
			<span
				style={{ marginRight: "16px" }}
				onClick={() => {
					handleOpera("edit", record);
				}}
			>
				编辑
			</span>
			{record.templateAttribute == "1" ? (
				<span
					style={{ marginRight: "16px" }}
					onClick={() => {
						handleOpera("add", record);
					}}
				>
					新增
				</span>
			) : (
				""
			)}
			<span
				style={{ marginRight: " 16px" }}
				onClick={() => {
					handleOpera("view", record);
				}}
			>
				预览
			</span>
			<span
				style={{ marginRight: "16px" }}
				onClick={() => {
					handleOpera("copy", record);
				}}
			>
				复制
			</span>
			{record.templateAttribute != 1 ? (
				<Popconfirm
					title={
						<div style={{ width: "150px" }}>请确认需要删除该模板？（删除后，当前适用范围内的待打印任务将不会读取该模板）?</div>
					}
					onConfirm={() => handleOpera("del", record)}
					okText="确定"
					cancelText="取消"
				>
					<span>删除</span>
				</Popconfirm>
			) : (
				""
			)}
		</span>
	);
};

//获取列数据
export const getColumns = ({ handleOpera, handleShowInput, handleChangTemplateName, handleAddStore }) => {
	const arr = [];
	Object.keys(columnConfig).map(v => {
		const item = columnConfig[v];
		if (v == "opera") {
			item.render = (t, r) => <RenderOpera handleOpera={handleOpera} record={r} />;
		} else if (v == "taskTypeName") {
			item.render = (text, record, index) => (
				<div key={index} style={{ display: "flex", alignItems: "center" }}>
					{record.isEdit ? (
						<Input
							key={index}
							maxLength={50}
							onBlur={e => handleChangTemplateName(e, record, index)}
							onPressEnter={e => handleChangTemplateName(e, record, index)}
							defaultValue={text}
							placeholder="模板名称"
						/>
					) : (
						text
					)}
					<span onClick={() => handleShowInput(record, index)} style={{ cursor: "pointer" }}>
						<IconFont type="iconedit" />
					</span>
				</div>
			);
		} else if (v == "ecStoreList") {
			item.render = (text, record) => (
				<div style={{ cursor: "pointer" }}>
					{storeRender(record)}
					{record.templateAttribute != "1" && ![8, 9, 10].includes(record.labelType) ? (
						<Popover content={<div style={{ width: "300px" }}>修改适用店铺范围，同标签类型下不同模板之间无法设置同一店铺</div>}>
							<span
								onClick={() => {
									handleAddStore(text, record);
								}}
							>
								<IconFont type="iconedit" />
							</span>
						</Popover>
					) : (
						""
					)}
				</div>
			);
		}
		arr.push(item);
	});
	return arr;
};
